<script setup lang="ts">
import {defineExpose, inject, reactive, ref, watch} from "vue";
import {formatDate, formatDateYmd} from "@/dt-lib/help/fun.ts";
import {customerView as view} from "@/dt-lib/plug/api/admin/customerCenter";

const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3', 'Tag 2', 'Tag 3', 'Tag 2', 'Tag 3', 'Tag 2', 'Tag 3'])


interface CustomerInfoIF {
  "cus_name": string
  "cus_id": number
  "cus_sex": number|string
  "cus_img": string
  "cus_type": number
  "status": number
  "id_add_op": number
  "id_add_dept": number
  "name_add_op": string
  "name_add_dept": string
  "addtime": number
  "province": number|string
  "province_name": string
  "biz_id": number|string
  "biz_name": string
  "city": number|string
  "city_name": string
  "area": number|string
  "area_name": string
  "wechat_join_day": number
  "id_join_type": number
  "operator_user_id": number
  "operator_user_dept": number
  "inherit_id": number
  "is_kaikou": number
  "is_del_follow_user": number
  "kaikou_nums": number
  "first_shop": number
  "first_deposit": number
  "shop_name": number|string
  "bra_name": string
  "operator_user_name": string
  "operator_dept_name": string
  "last_shop": number
  "id_ascr_op": number
  "id_ascr_dept": number
  "name_ascr_op": string
  "name_ascr_dept": string
  "remarks": string
  "source_id": number|string
  "source_name": string
  "supplie_id": number|string
  "supplie_name": string
}

const props = defineProps({
  cusId:{
    type: Number,
    required: true
  }
  ,mini:{
    type: Boolean,
    required: true
  }
})

const customer = reactive({
  info: <CustomerInfoIF>{}
})

const columnDefault = 4
const columnSize = ref(columnDefault);
const windowWidth = inject('windowWidth');

watch(windowWidth, (v) => {
  if (v < 850) {
    columnSize.value = 2

    if (v < 400) {
      columnSize.value = 1
    }

  } else {
    columnSize.value = columnDefault

  }
}, {immediate: true})


const getCus = () => {
  view({cus_id: props.cusId})
      .then(res => {
        customer.info = res.data
        emit('success', 'customer', res.data)
      })
}

// watch(()=>props.cusId, () => {
//   props.cusId>0 && getCus()
// },{immediate: true})

const emit = defineEmits(['success']);


const init = () => {
  console.log('customer-ini');
  getCus()
}

defineExpose({ init })

</script>

<template>

  <div class="customer-tag">
    <div class="tag"  v-for="tag in dynamicTags"  :key="tag">
      <el-tag
          :disable-transitions="false"
      >
        {{ tag }}
      </el-tag>
    </div>
    <div class="tag">
      <el-button size="small" >
        + 添加标签
      </el-button>
    </div>
  </div>
  <el-descriptions
      :column="columnSize"
      direction="vertical"
      border
  >
    <el-descriptions-item label="事业部">
      {{ customer.info.biz_name }}
    </el-descriptions-item>
    <el-descriptions-item label="品牌">
      {{ customer.info.bra_name }}
    </el-descriptions-item>
    <el-descriptions-item label="加微日期">
      {{ formatDateYmd(customer.info.wechat_join_day, false,'-') }}
    </el-descriptions-item>
    <el-descriptions-item label="创建时间">
      {{ formatDate(customer.info.addtime, false) }}
    </el-descriptions-item>
    <el-descriptions-item label="城市">
      {{ customer.info.city_name +" / "+  customer.info.area_name }}
    </el-descriptions-item>
    <el-descriptions-item label="推广人">
      {{ customer.info.operator_dept_name +" / "+  customer.info.operator_user_name }}
    </el-descriptions-item>
    <el-descriptions-item label="渠道">
      {{ customer.info.source_name }}
    </el-descriptions-item>
    <el-descriptions-item label="转介绍">
      -
    </el-descriptions-item>
    <el-descriptions-item label="首次下定日期">
      {{ formatDateYmd(customer.info.first_deposit, false,'-') }}
    </el-descriptions-item>
    <el-descriptions-item label="门店">
      {{ customer.info.shop_name }}
    </el-descriptions-item>
    <el-descriptions-item label="首次到店日期">
      {{ formatDateYmd(customer.info.first_shop, false,'-') }}
    </el-descriptions-item>
    <el-descriptions-item label="最近到店日期">
      {{ formatDateYmd(customer.info.last_shop, false,'-') }}
    </el-descriptions-item>
    <el-descriptions-item label="备注">
      {{ customer.info.remarks??'-' }}
    </el-descriptions-item>
  </el-descriptions>

</template>

<style scoped lang="scss">


.customer-tag {
  padding: 10px;
  margin-bottom: 15px;
  background-color: rgb(247 ,247,247);
  border-radius: 5px;
  border: 1px dashed #d9d9d9;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
</style>